<template>
	<view class="content" style="background-color: #fff;">
		<view class="top">
			<u-navbar scrollable=false :placeholder='true' bgColor="#ffffff" :autoBack="true" title="">
				<!-- <view slot="right" class="input_right flex">
					<u-input prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
						customStyle="background-color: #f5f5f5;" suffixIconStyle="color: #909399" border=""
						v-model="value" @change="changeInput">
					</u-input>
					<image src="/static/images/search/more.png"
						style="width: 48rpx; height: 48rpx;margin-left: 20rpx;position: relative;" mode=""></image>
				</view> -->
			</u-navbar>
		</view>
		<view class="container">
			<u-swiper height='440rpx' :list="list6" @change="e => currentNum = e.current" :autoplay="false"
				indicatorStyle="right: 20px">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
				</view>
			</u-swiper>
			<view class="card " style=" margin: 24rpx 4%; padding: 16rpx 20rpx; background-color: white;border-radius: 16rpx;">
				<view class="title flexJBC" style="width: 100%;">
					<view class="flex">
						<image :src="factory.store_image"
							style="width: 64rpx;height: 64rpx;border-radius: 32rpx;" mode=""></image>
						<text style="margin-left: 8rpx;" class="co3 fontS32 fw7">{{factory.store_name}}</text>
					</view>
					<!-- <u-icon name="arrow-right"></u-icon> -->
				</view>
				<view class="" style="margin-top: 10rpx;">
					主营:<text style="margin-left: 8rpx;" v-for="(item,index) in factory.main_business"
						:key="index">{{item}}{{index!=factory.main_business.length-1?' | ':''}}</text>
				</view>
				<view class="flex" style="flex-wrap: wrap;">
					<view class="box co6" v-for="(item,index) in factory.tags" :key="index"
						style="padding: 4rpx 8rpx;background-color: #f5f5f5;margin-right: 12rpx;margin-top: 12rpx;">
						{{item}}
					</view>
				</view>
				<view class="fw6 fontS24 co6" style="margin-top: 20rpx;">
					成立时间：{{(factory.set_up_time||'').slice(0,4)}}年{{(factory.set_up_time||'').slice(5)}}月
				</view>
				<view class="flexJBC" style="margin-top: 20rpx;">
					<text class="fw6 24rpx">{{factory.address}}</text>
					<!-- <u-icon name="arrow-right"></u-icon> -->
				</view>
			</view>
			<view class="paddingLR32"  @click="showCoupon=true" v-if="copuonList.length>0">
				<view class="whiteBox mt24" >
					<view class='flexJBC'>
						<view class="homeRed fontS24 elipes1" style="width: 80%;" >
							<text v-for="(item,index) in copuonList" :key="index" style="margin-right: 10rpx;">{{item.title}}</text>
						</view>
						<view class="fontS24 co3 flex"> 
							<text>领券</text>
							<u-icon name="arrow-right" color="#ccc" size="18rpx"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="flexJBC" style="margin: 24rpx 4%;background-color: white;padding: 20rpx;">
				<view class="left flex">
					<view class="" style="margin-right: 20rpx;">
						<u-image shape="circle" :showLoading="true" :src="factory.factory_director_image" width="80rpx"
							height="80rpx" @click="click"></u-image>
					</view>
					<view class="">
						<view class="flex">
							<text class="fontS28"
								style="margin-right: 10rpx;">{{factory.factory_director_name}}</text><text
								class="fontS20"
								style="display: block;background-color: #FAE1C5; padding: 0 10rpx;color: white; background-image: linear-gradient(to right,#FAE1C5,#C89C7B);">厂长</text>
						</view>
						<view class="fontS20 co6">接待1456次</view>
					</view>
				</view>
				<view class="right">
					<view class="homeRed fontS24"
						style="border: 2rpx solid #DD2131; text-align: center;border-radius: 48rpx; line-height: 48rpx; width: 128rpx ;height: 48rpx;padding: 8rpx 16rpx;">
						联系厂长
					</view>
				</view>
			</view> -->
			<view class="suggest" style="margin: 12rpx 4%;background-color: white;padding: 10rpx;" v-if="list.length>0">
				<view class="flexJBC co9">
					<text class="co3 fw5 fontS28">全部商品</text>
					<view class=" flex " @click="$my.go('/myPackageA/goodsAndFacton/factory/allGoods?store_id='+store_id)">
						<text>查看更多</text>
						<u-icon color="#999999" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="li_center">
					<scroll-view scroll-x="true">
						<view class="flex" style="flex-wrap: nowrap;">
							<view v-for="(item, index) in list" :key="index" class="li_img">
								<u-image :src="item.image" width="190rpx" height="190rpx" radius="8rpx"></u-image>
								<view class="money">
									￥<text>{{item.price}}</text> 
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="review">
				<view class="li">
					<view class="flexJBC co9" @click="">
						<text class="co3 fontS28">精选评价（{{reviewList.length}}）</text>
						<view class=" flex " @click="go">
							<text>查看全部</text>
							<u-icon color="#999999" name="arrow-right"></u-icon>
						</view>
					</view>
					<template v-if="reviewList.length==0">
						<view class="co9 fontS24" style="margin-top: 20rpx;">暂无有效评价</view>
					</template> 
					<template v-if="reviewList.length>0">
						<view class="review_li mt24" v-for="(item,index) in reviewList" :key="index">
							<view class="li_box1 flexJBC">
								<view class="flex">
									<u-image :src="item.avatar" mode="" width="32rpx" height="32rpx" radius="16rpx">
									</u-image>
									<text class="name co9 fontS20">{{$my.hideName(item.nickname)}}</text>
								</view>
							</view>
							<view class="li_text" style="margin: 16rpx 0;">
								{{item.comment_text}}
							</view>
							<view class="li_center">
								<scroll-view @scroll="getstoreGoods(true)">
									<view class="flex" style="flex-wrap: nowrap;">
										<view v-for="(item, index1) in item.image" :key="index1" class="li_img">
											<u-image :src="item.image" width="190rpx" height="190rpx" radius="8rpx">
											</u-image>

										</view>
									</view>
								</scroll-view>
							</view>

							<!-- <Preview :imgUrl='item.image'></Preview> -->
						</view>
					</template>
				</view>
			</view>
			<view class="center suggest_">
				<text class="fontS28 co6">— 为你推荐 —</text>
				<view class="shop_2">
					<view class="li" v-for="(item ,index) in listFa" :key="index" @click="$my.go('/myPackageA/goodsAndFacton/store?store_id='+item.id)">
						<view style="width: 200rpx;height: 200rpx;margin-right:20rpx;">
							<image :src='item.store_image' style="width: 200rpx;height: 200rpx;margin-right:20rpx;border-radius: 16rpx;" mode="aspectFill"></image>
						</view>
						<view class="right" style="text-align: left;flex: 1;overflow: hidden;">
							<view class="li_box flex" style="justify-content: space-between;" >
								<view class="co3 fw7 fontS28">{{item.store_name}}</view>
								<view class="float co9 fontS24 elipes1" style="flex: 1;text-align: right;margin-left: 15rpx;">{{item.address}}</view>
							</view>
							<view class="li_box">
								<text class="co3 fontS24" v-for="(item1,index1) in item.main_business" :key="index1">{{item1}}{{index1!=item.main_business.length-1?' | ':''}} </text>
								<text class="float co9 fontS20">已成交{{item.pay_number}}</text>
							</view>
							<view class="li_box flex">
								<view class=" fontS24 co3" v-for="(item,index) in item.tags" :key="index" :class="index%2==0?'yellow':'pink'">
									{{item}}
								</view>
							</view>
							<view class="li_box" >
								<view class="fontS24 co6 elipes2">{{item.store_info}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom flexJBC" style="margin-top: 24rpx; padding: 0 4%;background-color: white;">
				<view class="center flexcenter" style="padding: 16rpx 0;" @click.capture="check">

					<u-icon :name="focus?'star-fill':'star'" :color="focus?'#DD2131':'#666'" size="48rpx"></u-icon>
					<view>{{focus?'已关注':'+关注'}}</view>
				</view>
				<view class="">
					<button class="cof"
						style="background-color: #DD2131;width: 210rpx;height: 80rpx; border-radius: 48rpx;line-height: 80rpx;">
						在线咨询
					</button>
				</view>
			</view>
		</view>
		<Coupon :showCoupon='showCoupon' @showCouponClose='showCouponClose' :copuonList='copuonList' />
	</view>
</template>



<script>
	import Preview from '@/componentes/preview.vue'
	import Coupon from '@/componentes/coupon.vue'
	export default {
		components: {
			Preview,Coupon
		},
		data() {
			return {
				copuonList:[],//
				showCoupon:false,//优惠券弹窗
				page: 1,
				listFa: [], //推荐工厂
				value: '',
				currentNum: '',
				factory: '',
				focus: '',
				store_id: '',
				reviewList: [], //评论列表
				imgUrl: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg', 
					'https://cdn.uviewui.com/uview/album/10.jpg',
				],
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				list: [], //商品轮播图
				list6: [], //轮播图
			}
		},
		onReachBottom() {
			this.page++;
			this.getList()
		},

		methods: {
			getCouponList(val){
				this.$my.post('/index/coupon/get_coupon',{page:1,limit:100,mer_id:this.id,type:1}).then(res=>{
					if(res.code==200){
						this.copuonList=res.data
						this.copuonList.forEach(item=>{
							this.$set(item,'showInfo' ,false) //是否显示使用说明
						})
					}
				})
			},
			// 关闭优惠卷弹窗
			showCouponClose(val){
				this.showCoupon=val
			},
			// 获取推荐工厂
			getList() {
				this.$my.post('/index/merchantStore/getRecommentFactory', {
					id: this.store_id,
					page: this.page,
					limit: 10
				}).then(res => {
					if (res.code == 200) {
						this.listFa = this.listFa.concat(res.data.data)
					}
				})
			},
			//跳转评论页面
			go() {
				if (this.reviewList.length == 0) {
					this.$my.toast('暂无有效评价')
				} else {
					this.$my.go('/myPackageA/goodsAndFacton/evaluate/evaluate?type=3&id=' + this.store_id)
				}
			},


			// 关注
			check() {
				this.$my.post('/index/user/store_follow', {
					id: this.store_id,
					type: 3,
					is_batch: 0
				}).then(res => {
					this.$my.toast(res.message)
					if (res.code == 200) {
						this.init()
					}
				})
			},
			init() {
				//商店详情
				this.$my.post('/index/merchantStore/findFactoryDetails', {
						id: this.store_id
					}).then(res => {
						if (res.code == 200) {
							this.list6 = res.data.store_banner
							this.factory = res.data
							this.focus = res.data.focus
						}
					}),
					this.$my.post('/index/Product/getFactoryProduct', {
						//全部商品
						store_id: this.store_id,
						limit: '10',
						page: '1'
					}).then(res => {
						if (res.code == 200) {
							this.list = res.data.data
						}
					})
				// 评价
				this.$my.post('/index/storeComment/findStoreComment', {
					store_id: this.store_id,
					// store_id: 1,
					page: 1,
					limit: 1
				}).then(res => {
					console.log(res, '...........');
					if (res.code == 200) {
						this.reviewList = res.data.data
						console.log(this.reviewList);
					}
				})
			}
		},
		onLoad(option) {
			console.log(option.id);
			this.store_id = option.id ? option.id : 1
			this.init();
			this.getList();
			this.getCouponList()
		}
	}
</script>

<style lang="scss" scoped>
	.li_center {
		// height: 190rpx;
		// background-color: red;
		padding-top: 20rpx;
		padding-bottom: 12rpx;

		.li_img {
			min-width: 190rpx;
			height: 190rpx;
			margin-right: 18rpx;
			border-radius: 8rpx;
			overflow: hidden;
			position: relative;

			.money {
				position: absolute;
				width: 96rpx;
				height: 36rpx;
				background-color: rgba(0, 0, 0, 0.6);
				border-radius: 20rpx 0 0 0;
				right: 0;
				bottom: 0;
				color: white;
			}
		}
	}

	/deep/.input_right {
		width: 100%;
		// border: 1px solid red;
		height: 80rpx;
		background-color: white;
		box-sizing: border-box;
		padding: 0 20rpx;

	}

	/deep/.u-navbar__content__right {
		left: 10%;
		padding-right: 0;
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.content {
		.top {
			// margin-bottom: 20rpx;

			.top_left {
				margin-right: 20rpx;

			}
		}

		.container {
			background-color: rgb(245, 245, 245);

			.suggest {
				.li_center {
					height: 190rpx;
					// background-color: red;
					padding-top: 20rpx;
					padding-bottom: 12rpx;

					.li_img {
						min-width: 190rpx;
						height: 190rpx;
						margin-right: 18rpx;
						border-radius: 8rpx;
						overflow: hidden;
						position: relative;

						.money {
							position: absolute;
							width: 96rpx;
							height: 36rpx;
							background-color: rgba(0, 0, 0, 0.6);
							border-radius: 20rpx 0 0 0;
							right: 0;
							bottom: 0;
							color: white;
						}
					}
				}
			}

			.review {
				padding: 24rpx;
				background-color: white;
				border-radius: 16rpx;
				margin: 24rpx 4%;

				.li {
					margin-bottom: 30rpx;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}

			.suggest_ {
				.shop_2 {
					.li {
						margin: 0 auto;
						width: 90%;
						height: 240rpx;
						background-color: white;
						margin-top: 24rpx;
						border-radius: 16rpx;
						padding: 20rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;


						.right {
							height: 200rpx;
							flex-grow: 1;
							display: flex;
							justify-content: space-between;
							flex-direction:column;
							// background-color: tomato;

							.li_box {
								.float {
									float: right;
								}

								.yellow {
									margin-top: 10rpx;
									background-color: #FFF2D0;
									padding: 0 8rpx;
									margin-right: 20rpx;
									border-radius: 4rpx;
								}

								.pink {
									margin-top: 10rpx;
									background-color: #FFDED3;
									padding: 0 8rpx;
									border-radius: 4rpx;
									margin-right: 20rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
